Workshop 


Programming 


Super 
Mario Bros 
dengan C# 


Sprite animation adalah salah satu fundamental 
game programming. Kita akan melihat 
bagaimana membuat Super Mario berjalan 
dengan menggunakan bahasa pemrograman C#. 


Zeddy Iskandar Gunawan 


(4) Tambah ‘using’ Statement 


using System: 


using System.Windows.Formsj 
using System.Drawing; 
using System.Drawing.Drawing2Dj 


namespace MarioSprite 


( 


class Sprite 


) 
} 


Tambahkan tiga using statements sebelum kode namespace Mari- 
oSprite sehingga menjadi kode Sprite.cs menjadi seperti berikut. 
Ketiga using statement tadi berfungsi sebagai shortcut sehingga kita 
bisa mengetik MessageBox.Show() daripada mengetik System.Win- 
dows.Forms.MessageBox.Show(). Harap diperhatikan bahwa dalam 
bahasa C#, 'A' besar dan 'a' kecil adalah dua karakter yang berbeda, 
atau dalam dunia programming dikenal dengan istilah case-sensitive. 
Namun, jika terbiasa dengan bahasa case-sensitive, Anda akan lebih 
leluasa belajar bahasa seperti C++ dan Java. 
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Buka Visual C# 2005 


[A project for aeatng an appicaton with a Windows user interface —— 
m pee 
Satona: [me a 


Pastikan Anda telah menginstal Visual C# 2005 Express Edition 
atau Visual Studio 2005 Professional. Perlu dicamkan bahwa Visual 
Studio Express Edition adalah versi gratis Visual Studio dan dapat di- 
download dari http://msdn.microsoft.com/vstudio/express/ .Pilih Start 
MenulProgramslMicrosoft Visual C# 2005 Express Edition. Kemudian 
klik FilelNew Project. Pilih Windows Application. Ketik MarioSprite 
untuk Name dan C:\Projects untuk Location. Windows Application 
adalalah aplikasi dengan tampilan Graphical User Interface yang 
memiliki standar widgets seperti tombol Close. 


(5) Ketik Kode fields’ 


class Sprite 


// Fields 

private int frame: 
private Timer frameTimer: 
private int offsetj 
private Image image: 

// -- akhir Fields 


Ketik kode berikut ke dalam class Sprite. frame adalah nomor 
gambar yang akan ditampilkan pada satu saat. frameTimer adalah 
timer (ibaratnya stop-watch) yang akan mengganti gambar (frame) 
setelah selang beberapa saat. Timer inilah yang akan menimbulkan 
efek animasi. offset adalah tinggi gambar. Sebaiknya dalam sprite 
animation, semua sprite memiliki tinggi dan lebar yang sama. Dan 
terakhir image menyimpan bitmap semua gambar sprite kita. 
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(2) Hapus Kode Generate 


Sekarang kita akan menghapus kode Form1.cs dari Solution Explorer. 
Caranya adalah dengan memilih Form1.cs dengan tombol kiri mouse, 
lalu tekan tombol kanan mouse dan pilih Delete. Atau Anda bisa 
juga menghapus dengan cara memilih Form1.cs dengan tombol 
kiri mouse lalu menekan tombol Del di keyboard. Kita menghapus 
Form1.cs karena kita akan menulis semua kode drawing tanpa 
bantuan desainer. Jadi, kita akan membuat sprite animation tanpa 
drag-n-drop. 


(6) Ketik Kode ‘constructor’ 


Workshop 


Programming 


Buat Class Bernama Sprite 


B- g MarioSorite 


Dari Solution Explorer, pilih project MarioSprite dengan tombol kiri 
mouse, kemudian klik kanan MarioSprite dan pilih AddlClass. Ganti 
default name dari Class1.cs ke Sprite.cs ketika muncul dialog class 
name. Semua penambahan dan penghapusan project item seperti 
Class dan Windows Form dilakukan dari Solution Explorer. Di class 
Sprite inilah, kita akan menulis kode yang akan merepresentasikan 
sebuah objek Sprite. 


Ketik Method 'gantiFrame' 


// Constructor 

public Sprite(string imgFile, int offset) ( 
this. offset = offset; 
this. image = new Bitmap (imgFile); 


// -- akhir Constructor 


// Pindah dari satu frame ke frame berikutnya 
private void gantiFrame (Object s, EventArgs e) ( 
##tthis. frame: 


// ulang dari frame 1 jika perlu 
if (this. frame >= 
this. image.Height / this. offset) ( 
this. frame = 0; 


) 
// -- akhir gantiFrame 


Ketik kode berikut setelah // -- akhir Fields. Constructor adalah method 
(prosedur) yang dipanggil tiap kali sebuah object “dilahirkan” (dibuat 
baru). Constructor memiliki nama yang sama dengan nama class. 
Constructor ini akan menerima dua argumen, satu berupa nama file 
yang berisi semua gambar sprite, dan yang satu lagi menerima tinggi 
sprite dalam file gambar tadi. Contohnya dalam file MarioJalan.gif ada 
3 sprite Mario, dan mereka ditumpuk di atas yang lainnya. Cara men- 
split ketiya gambar Mario tadi adalah dengan memotong gambar di 
sebuah offset, yang dalam program ini berupa tinggi sprite yang sama, 
yaitu 64 pixel. 
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Ketik kode berikut setelah // -- akhir Constructor. gantiFrame() meru- 
pakan sebuah event-handler dan tiap event-handler harus menerima 
dua argumen, satu bertipe Object dan yang satu lagi bertipe EventArgs. 
##this. frame akan menambah angka 1 (meng-increment) ke field 
. frame. Sehingga yang tadinya frame = 0 (Mario dengan dua kaki 
diatas tanah) menjadi frame = 1 (Mario dengan satu kaki melangkah 
ke depan). Efek ganti frame secara cepat inilah yang akan menimbulkan 
ilusi Mario sedang berjalan. Kode di dalam if.. akan mengulang dari frame 
0 jika gantiFramel) dipanggil pada saat. frame bernilai 2, karena tinggi 
gambar Mario adalah 192 pixel dan masing-masing sprite mempunyai 
tinggi 64 pixel—lihat MarioJalan.gif. 
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Ketik Kode Method 'Frame' 


// Tampilkan frame terkini 

public Bitmap Frame (Graphics g) ( 

Bitmap b = new Bitmap(this. image.Width, 
this. offset, g): 


Graphics g2 = Graphics.FromImage (b) ; 
9g2.DrawImageUnscaled (this. image, 0, 
0 - (this. frame * this. offset) ): 


g2.Dispose (): 
return b; 


// -- akhir Frame 


Ketik kode berikut setelah // -- akhir gantiFrame. Method ini akan 
mengembalikan object bertipe Bitmap. Baris pertama membuat object 
Bitmap baru dengan ukuran yang sama dengan file MarioJalan.gif. 
Baris kedua membuat sebuah object Graphics yang bisa dimanipulasi 
layaknya kanvas pelukis (contoh: menggambar kotak dan elips di 
atasnya). Baris ketika menggambar sprite sesuai dengan nilai frame 
terkini. Contohnya, jika frame = 0, sprite yang akan digambar adalah 
yang bermulai di lokasi (0,0). Sedangkan jika frame = 1, sprite yang 
akan digambar adalah yang bermulai di lokasi (0,64). 


Tambah ‘using’ Statement 


using System.Windows.Forms:j 
using System.Drawing; 
using System.Drawing.Drawing2Dj 


Tambahkan beberapa baris using statements berikut sebelum 
'namespace MarioSprite di Layar.cs... ' Seperti dibahas sebelumnya 
fungsi using adalah sebagai shortcut, sehingga kita dapat memang- 
gil method yang ada di dalam class System.Drawing tanpa awalan 
System.Drawing. Contohnya kita dapat memanggil Bitmap tanpa 
menulis System.Drawing.Bitmap. 
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(9) Ketik Kode Method ‘Start’ 


// Start timer 
public void Start (int i) ( 
this. frameTimer = new Timer (); 
this. frameTimer.Interval = i; 
this. frameTimer.Tick += new 
EventHandler (gantiFrame) : 


this. frameTimer.Start (): 


} 


// -- akhir Start 


Ketik kode berikut setelah // -- akhir Frame. Start akan memulai 
. frameTimer (ibaratnya stop-watch). Method ini menerima satu argu- 
men, yaitu sebuah angka integer. Angka inilah yang akan dijadikan 
interval timer dalam millidetik. Jadi misal i = 100, timer akan dipanggil 
tiap 100 millidetik. Baris pertama membuat object Timer baru. Baris 
kedua menyetel interval timer. Baris ketiga menyambungkan antara 
timer dan event handler. Ini artinya tiap kali interval dicapai, method 
gantiFramel) akan dipanggil. Dan baris terakhir memulai timer. 


Ketik Kode ‘fields’ Layar 


class Layar : Form // tambahkan ini! 


( 
// Fields 
private Timer tj 
private Sprite sj 
private int xMarioj 
// -- akhir Fields 

} 


Dalam dunia Object-Oriented Programming, fields adalah data, se- 
dangkan methods adalah operasi sebuah object. Sebuah object pasti 
memiliki field, contohnya manusia memiliki kaki. Dan sebuah object 
juga baiknya memiliki method yang mengutilisasi field tadi, contohnya 
kita menggunakan method “Jalan” yang beroperasi atas data "kaki". 
Ubah kode class Layar menjadi kode berikut. t adalah timer yang akan 
memindahkan Mario dari kiri ke kanan (timer yang ada di class Sprite 
berfungsi menggantikan frame). s adalah object bertipe Sprite (kita 
telah membuat class ini). Dan xMario menyimpan koordinat-x untuk 
menggambar Mario di atas Layar. 
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Ketik Kode Method ‘Stop’ 


// Stop timer 

public void Stop() ( 
this. frameTimer.Stop (): 
this. frameTimer.Dispose (): 


// -- akhir Stop 


Ketik kode berikut setelah // -- akhir Start. Kode ini berfungsi untuk 
mematikkan timer. Ketika timer dimatikan, method gantiFramel) 
tidak akan dipanggil lagi tiap kali interval tercapai. Baris pertama 
menyebabkan timer berhenti berhitung menunggu interval. Dan baris 
kedua menandakan bahwa object ini tidak dibutuhkan lagi. 


Ketik Kode ‘Animate’ 
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Buat Class Bernama ‘Layar’ 


Ulangi langkah 3 (Menambahkan Class), dan namakan class baru ini 
Layar.cs. Layar ini berfungsi ibaratnya panggung. Di atas object inilah 
kita akan menaruh background dan menaruh gambar tanah. Kemu- 
dian kita akan menaruh Mario di atas tanah dan menganimasi-nya, 
sehingga akan terlihat Mario berjalan di atas tanah tadi. 


Ketik Kode “OnPaint' 


// Animate 
public void Animate (Object s, EventArgs e) ( 
if (this. xMario < this.Width) 
this. xMario += 2; 
else 
this. xMario = 0; 


this.Invalidate (): 


) 
// -- akhir Animate 


// OnPaint 
public void OnPaint (Object s, 
PaintEventargs e) ( 
Graphics g = e.Graphicsj 
g.DrawImage (this. s.Frame (g), 
this. xMario, 
25): 
} 


// -- akhir OnPaint 


Tambahkan kode berikut setelah // -- akhir Fields. Method ini juga 
merupakan event-handler, oleh karenanya harus menerima dua argu- 
men, pertama bertipe Object dan kedua bertipe EventArgs. Baris per- 
tama menyatakan, jika koordinat-x Mario sekarang masih dalam batas 
lebar Layar, maka tambahkan 2 ke koordinat-x sekarang. Ini akan 
menggambar sprite Mario dari kiri ke kanan. Baris 'else' menyatakan 
jika Mario telah melewati lebar Layar, maka taruh Mario kembali di 
ujung sebelah kiri. Baris terakhir this.Invalidate() menyatakan untuk 
menghapus sprite Mario sebelumnya, agar tidak menimbulkan efek 
shadow, di mana kelihatan ada Mario di belakang Mario. 
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Tambahkan kode berikut setelah // -- akhir Animate. OnPaint(/ adalah 
sebuah event-handler yang akan selalu dipanggil jika event-handler 
Invalidate() dipanggil. Jadi method ini akan dijalankan setelah method 
Animatel). Baris pertama adalah kode untuk mendapatkan object 
Graphics agar bisa menggambar di atasnya. Baris kedua g.Drawlmage 
menggambar sprite Mario dengan posisi koordinat-x = xMario dan 
posisi koordinat-y selalu 25 (posisi Mario persis di atas tanah). 
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Ketik Kode ‘Constructor’ 


// Constructor 
public Layar() ( 
Init (): 
InitTimer (): 
// hindari efek flicker 
HindariFlicker (): 


// -- akhir Constructor 


Tambahkan kode berikut setelah // -- akhir OnPaint. Kode ini akan 
dijalankan tiap kali object Layar diciptakan. Baris pertama memanggil 
Init() untuk menyusun object-object di layar seperti background, judul 
window, posisi window ketika program dijalankan dan sebagainya. 
Baris kedua memanggil InitTimer() yang akan membuat timer mulai 
menghitung interval. Dan baris terakhir memanggil HindariFlickert) 
untuk membuat animasi kita flicker-free, yaitu animasi tanpa efek 
kedip-kedip. 


Ketik Kode 'HindariFlicker' 


// HindariFlicker 

private void HindariFlicker () 

{ 
this.SetStyle ( 
ControlStyles.UserPaint, 
this.SetStyle ( 


true): 


ControlStyles.AllPaintingInWmPaint, true): 
this.SetStyle ( 
ControlStyles.OptimizedDoubleBuffer, true): 


// -- akhir HindariFlicker 


Tambahkan kode berikut setelah // -- akhir InitTimer. HindariFlicker akan 
mengoptimalkan aplikasi kita agar tidak menimbulkan efek kedip-kedip. 
Baris pertama mengatakan bahwa kita telah menulis metode OnPaint() 
dan akan menggambar window tanpa bantuan operating system. Baris 
kedua menyatakan bahwa OnPaint() hanya akan dipanggil dalam mes- 
sage WM. PAINT, yaitu ketika operating system menyuruh aplikasi kita 
menggambar diri sendiri (WM. PAINT dikirim operating system Windows 
ketika aplikasi tidak di-minimize dan tidak ditutupi window lain). Dan 
baris ketiga mengaktifkan fitur double-buffer, yang menyebabkan 
animasi menggunakan dua buffer ketimbang hanya satu buffer (yang 
mengakibatkan efek kedip-kedip). 
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Ketik Kode ‘Init’ 


ff Tiit 
private void Init() { 
this.Text = "Mario Sprite Animation"; 


this.Size = new Size(300, 140); 
this.BackColor = Color.Black; 
this.MaximizeBox = false; 
this.FormBorderStyle = 
FormBorderStyle.FixedSingle; 
this.CenterToScreen (): 


// Susun background & sprite 


Tambahkan kode berikut setelah // -- akhir Constructor. Baris pertama 
menjadikan judul program menjadi “Mario Sprite Animation”. Baris 
kedua menyatakan bahwa window aplikasi kita memiliki lebar 300 
pixel dan tinggi 140 pixel. Baris ketiga menyatakan bahwa warna 
background window kita adalah hitam. Baris keempat menyatakan 
bahwa tidak akan muncul tombol untuk Maximize aplikasi. Baris 
kelima menyetel ukuran pinggiran window yang tipis. Dan baris 
CenterToScreen() menyatakan aplikasi kita akan selalu muncul di 
tengah monitor. 


Modifikasi Program.cs 


Application.Run (new Layar ()): 


Dari Solution Explorer, buka file Program.cs dengan cara mendobel- 
kliknya. Ubah kode baris Application.Run menjadi seperti ini. Kode ini 
mengatakan untuk menjalankan aplikasi kita dengan menggunakan 
object Layar sebagai window pertama yang dimunculkan. 
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Background dan Sprite 


this.BackgroundImage - Image.FromFile 
("C:/MarioBackground.gif") : 

this. s - new Sprite("c:/MarioJalan.gif", 
64): 

this.Paint += new 
PaintEventHandler (OnPaint): 


// -- akhir Init 


Tambahkan kode berikut setelah // susun background & sprite. Baris 
pertama menyatakan bahwa background aplikasi kita akan memiliki 
gambar, dan gambar ini diambil dari lokasi CNMarioBackground.gif. 
Baris kedua menyatakan bahwa kita membuat object Sprite baru 
dengan berbasiskan gambar di CMarioJalan.gif dengan nilai offset 
= 64 pixels. Dan baris terakhir menyatakan bahwa tiap kali Windows 
menyuruh aplikasi kita untuk menggambar (ketika aplikasi tidak di- 
minimize atau tertutup window lainnya), maka selalu panggil method 
OnPaint() yang telah kita tulis sebelumnya. 


22) Copy Gambar Mario ke Ca 


FS) Mario Sprite Animation 


Download file MarioJalan.zip dari http:/www.zedilabs.com/down- 
load/MarioJalan.zip atau dari CD dan DVD PC Media yang terdapat 
dalam edisi ini. Copy file “MarioJalan.gif” dan “MarioBackground.gif” 
keCN, lalu pilih DebuglStart Debugging atau tekan F5 untuk melihat 
hasil sprite animation Anda! Anda akan melihat Mario berjalan dari 
kiri ke kanan dan di atas batu bata. Completed project ini dapat Anda 
download di http://www.zedilabs.com/download/MarioSprite.zip. 
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Ketik Kode “InitTimer 


// InitTimer 
private void InitTimer() 


this. t = new Timer): 
this. t.Interval = 15: 
this. t.Tick += new EventHandler (Animate): 
this. t.Start (): 
this. s.Start (90): 
) 
// -- akhir InitTimer 


Tambahkan kode berikut setelah // -- akhir Init. Baris pertama 
membuat object Timer baru. Baris kedua membuat timer yang akan 
memindahkan Mario dari kiri ke kanan. Timer ini akan dipanggil tiap 
15 millidetik. Baris ketiga menyambungkan antara Timer t dengan 
event-handler Animatel). Jadi tiap 15 millidetik, panggil method 
Animate() yang akan memindahkan Mario dari kiri ke kanan untuk 
menimbulkan efek berjalan. Baris ketiga menyalakan timer dan baris 
terakhir menyalakan timer sprite untuk interval 90 millidetik. 


Animasi Karakter Lainnya 


clin 


, duck, 


skid, 


Coba tes skill programming Anda dengan memodifikasi program di 
atas menjadi animasi Luigi atau karakter lainnya. Coba juga apakah 
Anda bisa menjalankan Mario secara mundur dari kanan ke kiri. Dan 
terakhir coba apakah Anda bisa membuat animasi sprite Mario ketika 
berlompat-lompat! Anda bisa menggunakan file image dari website 
berikut untuk karakter dan background lainnya: http://www. videoga- 
mesprites.net/SuperMarioBros/. Selamat beranimasi dengan sprite! 
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Modifikasi 
Mobil dengan 
Krom 


Hobi memodifikasi mobil tentu bisa milik siapa 
saja. Tapi, bagaimana mereka bisa mewujudkan 
hobinya? Salah satunya dengan menggunakan 
bantuan Adobe Photoshop. Mulai membuat 
stiker dan gambar di bodi mobil, hingga 
memberi efek krom bisa dilakukan di atas 
kanvas. Berikut ini langkah memberikan efek 
krom pada mobil target modifikasi Anda. 


Hayri 


(4) Tambahkan Layer Mask 


t 
2 

D3 
“7. 
P4. 
DEd 
2.2. 
EAA 
S:T. 
ÈN 
37. 

IA 


aa 


Setelah area-area seleksi Anda tata dengan rapi, langkah berikutnya 
adalah menambahkan sebuah Layer mask pada layer duplikat tadi. 
Tujuannya adalah untuk memisahkan area terseleksi dengan area 
aslinya agar lebih fleksibel dimodifikasi. Layer mask dapat Anda 
berikan pada layer duplikat ini dengan mengklik icon Add Layer 
Mask © yang berada di bagian paling bawah dari tab Layers. Sesaat 
kemudian maka layer duplikat Anda sudah memiliki pasangannya 
yang berupa layer berwarna dasar hitam dengan sedikit warna putih 
untuk menunjukkan area seleksi yang telah kita buat tadi. 
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Buka Foto Mobil 


Langkah pertama untuk memulai efek ini adalah memilih dan membuka 
foto yang akan Anda modifikasi. Buka foto dengan mengklik menu 
FilelOpen... Setelah menu terbuka, pilih foto yang Anda inginkan dan 
tekan tombol OK setelahnya, maka foto akan terbuka. Untuk membuat 
efek krom ini menjadi tampak lebih nyata dan hidup paling ideal adalah 
menggunakan foto mobil berwarna hitam. Efek krom akan lebih tam- 
pak nyata pada warna dasar mobil yang hitam. Namun, tidak menutup 
kemungkinan untuk diterapkan pada mobil dengan warna lain. 


(5) Blending Mode Screen 


Oa” KPR ATO 
SEM LAPONN NA DR " 


geb 
ar 


Sekarang Anda sudah memiliki sebuah Layer mask yang terletak tepat 
di samping layer duplikat tadi. Langkah berikutnya adalah memodi- 
fikasi layer mask tersebut untuk mendapatkan efek krom. Modifikasi 
pertama adalah dengan mengubah blending mode dari Layer mask 
tersebut menjadi dalam mode Screen. Caranya, kliklah layer mask yang 
berwarna hitam tersebut, kemudian kliklah drop down menu pada 
tab Layers bagian atas yang berisikan opsi-opsi pengaturan blending 
mode. Pilih opsi Screen pada drop down menu tadi, sesaat kemudian 
area seleksi Anda sudah tampak seperti dilapisi krom tipis. 
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(2) Duplikasi Foto Mobil 
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Langkah berikutnya adalah menduplikasi foto mobil yang ingin 
dimodifikasi ini. Tujuannya adalah agar foto aslinya tidak terganggu 
gugat dan dapat berperan sebagai background. Duplikasi foto mobil 
ini dengan mengklik dan drag layer background yang merupakan 
foto aslinya ini menuju ke icon Create a new layer = yang berada 
di bagian bawah tab Layers. Sesaat kemudian layer duplikasi telah 
tampak di tab Layers ini. Anda juga bisa melakukan duplikasi dengan 
mengklik menu /magelbuplicate... 


(6) Atur Parameter Level 


Efek krom yang telah jadi sekarang masih terasa kurang karena belum 
tampak jelas kilapannya. Untuk menambahkan efek krom agar lebih 
tampak bersinar, aturlah parameter levelnya. Caranya, kliklah pada 
layer duplikat, kemudian klik menu ImagelAdjustmentslLevels... Setelah 
menu pengaturannya muncul, aturlah panah-panah pengaturan Le- 
velnya. Jika Anda ingin efek krom tampak lebih terang, geserlah ke 
kiri panah berwarna abu-abu dan putih. Jika ingin tampak lebih gelap, 
geserlah panah hitam ke arah kanan. Semuanya sesuai dengan selera 
Anda. Setelah mendapat pengaturan yang tepat, klik tombol OK. 
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Seleksi Area Krom 


Untuk memulai efek krom pada mobil ini, langkah pertama adalah 
menentukan area mana saja yang akan diberi efek krom. Area-area 
yang biasanya di krom pada mobil adalah kaca spion, bumper, grill, dan 
banyak lagi. Namun, Anda dapat bebas berkreasi untuk menentukan 
area mana saja yang akan dikrom. Untuk menyeleksi area tersebut, 
kliklah layer duplikat tadi. Kemudian gunakan Polygonal Lasso tool 
atau Magnetic Lasso tool atau tool seleksi apapun yang Anda suka. 
Seleksi area-area target krom Anda ini dengan sangat teliti untuk 
mendapatkan hasil yang baik. 


Efek Krom pada Mobil 


Setelah semuanya selesai, Anda sudah mendapatkan mobil Anda 
memiliki area yang telah dikrom. Pada area yang di krom ini, pan- 
tulan dari keadaan sekitar akan tampak lebih terang, seperti halnya 
pada area krom sesungguhnya. Sinar keputihan dari krom juga akan 
tampak nyata. Namun, tingkat keterangan dan hidupnya efek krom 
ini tergantung pada pengaturan Anda pada pengaturan Levels di 
atas. Semua tergantung pada selera dan kreativitas Anda dalam 
memodifikasi mobil di atas kanvas ini. Selamat mencoba! 
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Foto Momen 
Rekayasa 


Jalan-jalan bertamasya memang paling tepat 
untuk membawa serta kamera Anda. Momen 
penting di suatu tempat dengan background 
pemandangan indah yang tidak pernah 
berulang lagi tentu sangat pantas untuk 
diabadikan. Tapi, bagaimana bila Anda belum 
punya kesempatan untuk bertamasya? Jangan 
khawatir, buat saja foto momennya dulu dengan 
Adobe Photoshop. 


Hayri 


(4) Paste ke Foto Target 


EX LAPOON NA 


Li MN Ooo” KEP anto `‘ 
ALa i 


Langkah selanjutnya adalah meletakkan objek utama tadi ke dalam 
foto target. Karena Anda sudah melakukan copy pada objek utama, 
selanjutnya tinggal paste-kan saja objek utama tadi pada foto target. 
Untuk itu, munculkan foto target yang tadi sudah dibuka. Kemudian 
tekanlah tombol CTRL + V pada foto tersebut. Sesaat kemudian sebuah 
layer baru terbentuk yang berisikan foto objek utama yang Anda copy 
tadi. Anda kini sudah dapat melihat foto tersebut berada di atas foto 
pemandangan yang menjadi target. Namun, ukuran dan posisinya 
masih belum benar. 


112 WORKSHOP: PHOTOSHOP 


Buka Kedua Foto 


Untuk membuat foto rekayasa ini, Anda membutuhkan dua buah foto. 
Foto pertama adalah foto diri Anda atau orang lain sebagai subjek 
yang akan diletakkan di pemandangan baru. Foto kedua adalah foto 
pemandangan itu sendiri. Pilihlah dua buah foto yang lokasi pengam- 
bilannya hampir sama, misalnya jika foto subjeknya di luar ruangan, 
maka usahakan agar foto targetnya juga merupakan foto luar ruangan. 
Buka kedua foto tersebut dengan cara mengklik menu FilelOpen... Pilih 
foto yang sesuai, kemudian tekan OK maka foto akan terbuka. 


(5) Atur Posisi dan Ukuran 
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Karena ukuran dan posisinya masih belum benar, aturlah foto objek 
utama ini dengan menggunakan bantuan fasilitas Free transform. 
Untuk melakukan itu, kliklah layer foto objek utama tadi dan klik menu 
EditlFree transform, atau tekan saja tombol CTRL--T. Sesaat kemudian 
frame pengaturan muncul di tepi-tepi foto. Untuk mengatur ukurannya, 
tekan dan tahanlah tombol Shift sambil menarik ke dalam titik sudut dari 
frame tersebut. Anda dapat melihat foto objek utama tersebut menge- 
cil. Setelah ukurannya cocok, tekan tombol Enter. Atur juga posisinya 
dengan Move tool hingga berada di tempat yang tepat. 
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(2) Seleksi dengan Quick Mask 
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Langkah berikutnya adalah melakukan editing terhadap foto subjek 
terlebih dahulu. Tampilkanlah foto subjek yang berisi orang atau objek 
yang ingin Anda pindahkan. Setelah itu, kliklah icon Edit in quick mask 
mode MI. Di dalam mode Quick mask, Anda dapat melakukan seleksi 
cukup dengan memoleskan Brush tool warna hitam pada objek yang 
ingin diseleksi. Poleskan brush ke area-area yang ingin dipilih dengan 
teliti. Atur ukuran brushnya jika diperlukan dan lakukan juga zoom 
untuk memoleskan brush dengan lebih teliti. Anda akan mendapatkan 
area seleksi berwarna merah muda. 


(6) Atur Hue/Saturation 


Setelah selesai dengan polesan brush, kembalilah ke mode standar 
dengan mengklik icon Edit in Standard mode ISI. Sesaat kemudian area 
yang berwarna merah muda hilang digantikan dengan area seleksi. 
Namun untuk mendapatkan objek yang diinginkan terseleksi, lakukan 
pembalikan seleksi dengan menekan tombol CTRL + Shift + I, maka kini 
objek yang dipoles tadi yang terseleksi. Setelah objek terseleksi dengan 
baik, tekanlah tombol CTRL + C untuk melakukan copy terhadap objek 
tersebut. Tujuannya adalah untuk dapat diletakkan di foto lain yang 
akan menjadi targetnya. 


Foto Kenangan Baru 


Sampai di sini saja sebenarnya Anda sudah mendapatkan sebuah foto 
momen yang baru hasil rekayasa. Namun, terkadang pencahayaan dan 
warna antara foto objek utama dengan foto background-nya belum 
Cocok. Maka itu, cocokanlah pewarnaan dan tingkat kecerahannya den- 
gan memodifikasi parameter Hue dan Saturation. Untuk itu, klik menu 
ImagelAdjustmentlHue/Saturation. Aturlah parameter Hue, Saturation 
dan Lightness sesuai dengan kondisi lingkungan di foto background. 
Setelah selesai klik OK, maka foto objek utama dengan background 
akan tampak lebih menyatu. 
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Kini Anda sudah memiliki foto kenang-kenangan yang baru yang 
sebelumnya belum pernah ada. Bahkan Anda tidak akan pernah ingat 
kapan Anda mengalami momen tersebut karena semua itu memang 
hanya rekayasa saja. Tetapi jika tidak diperhatikan dengan saksama, 
maka foto ini tampak seperti asli, terutama jika Anda cukup rapi 
melakukan seleksi dan juga mendapatkan pengaturan Hue/Saturation 
yang tepat. Seperti Anda berada di dalam foto tersebut pada momen 
yang sama. Tentu akan banyak menipu mata orang yang melihatnya. 
Selamat mencoba! 
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Workshop 


Microsoft Excel 


Membuat 
Buku Rapor 
Elektronik 


Apakah pada setiap akhir semester Anda 
menghabiskan banyak waktu untuk menghitung 
nilai secara manual? Ada cara yang mudah 
untuk menghitung dan mencatat nilai para 
murid. 


Gunung Sarjono 


(4) Penilaian dengan Poin (2) 


Percentage formats multiply the cell value by 100 and displays the result with 
a percent symbol, 
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Di setiap sel kolom tersebut, ketik -A#/B#, di mana A# menunjukkan 
sel di mana total poin murid ditampilkan dan B# menunjukkan sel 
di mana perkiraan total poin semua penilaian ditampilkan. (B# akan 
mengacu ke sel yang sama untuk setiap murid.) Untuk mengubah 
hasil dari desimal ke persentase, pilih kolom Percentage. Pada 
menu Format, klik Cells. Pada tab Number, di daftar Category, klik 
Percentage dan kemudian klik OK. Untuk membuat buku rapor 
elektronik di mana setiap penilaian dinilai berdasarkan angka rata- 
rata, bukannya poin. 
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Buat Workbook (1) 


Kane MI Da hasi AI DER 


Dengan beberapa formula dasar dan sedikit pengaturan, Anda bisa 
mengubah worksheet Excel menjadi buku rapor elektronik yang 
akan menghitung nilai murid untuk Anda. Untuk membuat buku 
rapor elektronik: Pada Excel, buat workbook baru. Ketik nama guru, 
pelajaran, dan informasi yang relevan di sel bagian atas. Ubah nama 
tab sheet yang ada di bagian bawah layar menjadi tingkat, pelajaran, 
atau periode. Untuk melakukannya, pada menu Format, pilih Sheet, 
dan kemudian klik Rename. Pada kolom A, ketik data murid (misalnya 
nama dan nomor induk) secara vertikal. 


(5) Penilaian dengan Rata-Rata 


Insert Functior 


COUNT 

MAX 

SIN 
AYERAGE(number1,number2,...) 


Returns the average (arithmetic mean) of its arguments, which can be 
numbers or names, arrays, or references that contain numbers, 


Help on this function 


Di sebelah kanan kolom data murid, siapkan kolom untuk menampilkan 
nilai rata-rata murid dan beri nama kolom Rata-Rata. Pada setiap sel 
kolom, ketik -average(A#:Z#), di mana A dan Z menunjukkan kolom 
penilaian pertama dan terakhir dan # menunjukkan nomor baris. Untuk 
menghitung rata-rata dengan cepat, pilih sel tempat nilai rata-rata. 
Pada menu Insert, klik Function. Kotak dialog Insert Function muncul. 
Di bawah Select a Function, klik Average, dan kemudian klik OK. Kotak 
dialog Function Arguments muncul. Di bawah Average, ketik range 
sel yang ingin dirata-rata, dan kemudian klik OK. 
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(2) Buat Workbook (2) 


Workshop 


Microsoft Excel 


Penilaian dengan Poin (1) 


Gunakan kolom tambahan untuk informasi lain yang relevan, ber- 
gantung kepada jenis buku rapor yang ingin Anda buat (apakah 
berdasarkan poin atau rata-rata). Kolom selanjutnya menunjukkan 
awal penilaian—setiap penilaian akan diberikan kolom sendiri. Untuk 
membuat tampilan buku rapor klasik dan untuk menghemat tem- 
pat, ketik setiap pokok penilaian agar dicetak secara vertikal. Untuk 
melakukannya, pilih kolom, dan kemudian klik Cells pada menu 
Format. Pada tab Alignment, seret ke atas kotak merah di bawah 
Orientatation sehingga teks akan dicetak pada sudut 90 derajat, dan 
kemudian klik OK. 


(6) Beri Bobot Penilaian (1) 
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Untuk memberi bobot ke kuis dan ujian sebagai perbandingan 
dengan penilaian biasa: Pada kolom setelah kuis atau ujian yang 
akan diberi bobot, mulai dari murid pertama, ketik =A#, di mana A 
adalah huruf kolom sebelumnya dan # adalah nomor baris saat ini. 
Jika, misalnya angka ujian 10 tercantum pada sel Q4 maka formula 
pada sel R4 adalah =Q4, sehingga angka kuis dihitung dua kali. Untuk 
menghitung angka tiga kali, ketik formula yang pada sel di kolom 
sebelahnya. Pada contoh di sini, sel S4. Setelah memasukkan formula 
bobot, sembunyikan kolom yang berisi formula tersebut. 
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Untuk membuat buku rapor elektronik di mana setiap penilaian 
diberi suatu poin: gunakan baris di bawah judul penilaian untuk 
memasukkan perkiraan total poin untuk setiap penilaian. Ketik Total 
Perkiraan Poin pada sel pertama baris tersebut. Di sebelah kanan 
data murid, gunakan kolom dan beri nama Total Poin. Di setiap sel 
kolom tersebut, ketik -sum(A#:Z#), di mana A dan Z menunjukkan 
kolom penilaian pertama dan terakhir dan # menunjukkan nomor 
baris. Di sebelah kanan kolom Total Poin, gunakan kolom dan beri 
nama Persentase. 


Beri Bobot Penilaian (2) 


2321333731737373 


Pilih seluruh kolom, klik kanan, dan kemudian klik Hide. Ini tidak akan 
mengubah formula, tetapi ini membuat buku rapor lebih mudah 
dibaca. Untuk mengetahui kolom yang tersembunyi, periksa huruf 
kolom. Jika ada huruf yang hilang, maka kolom tersebut disembunyi- 
kan. Sebagai contoh, jika judul kolom tertulis “A C” maka kolom 
B disembunyikan. Untuk menampilkan kolom, pilih kolom di kedua 
sisinya, klik kanan, dan kemudian klik Unhide. Untuk menampilkan 
semua kolom pada worksheet, pilih semua kolom, klik kanan, dan 
klik Unhide. 
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Workshop 


Microsoft Excel 


Masukkan Huruf Nilai (1) 


Untuk menampilkan huruf nilai berdasarkan nilai persentase atau 
nilai rata-rata murid: buat skala nilai di suatu tempat dekat bagian 
atas worksheet. Sel E1 bisa digunakan untuk itu. Pada contoh 
berikut, nilai di sebelah kanan huruf menunjukkan persentase 
maksimum untuk huruf nilai tersebut. (Supaya mudah dibaca, 
ubah latar atau warna sel. Untuk melakukannya, pilih sel yang 
ingin Anda ubah, dan kemudian klik Cells pada menu Format. 
Kotak dialog Format Cells muncul. Pada tab Pattern, Anda bisa 
mengatur pola warna dan gambar sel. 


12 Format dan Freeze Rapor 
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Untuk memberi format khusus ke buku rapor elektronik Anda: pilih 
sel yang ingin diformat. Pada menu Format, klik AutoFormat. Klik 
ganda desain yang ingin Anda gunakan, dan kemudian klik OK. Untuk 
mempermudah pembacaan Anda bisa me-"nahan” suatu baris atau 
kolom supaya tidak bergerak pada waktu berpindah antarsel. Pilih 
baris atau kolom di bawah atau di kanan baris atau kolom yang ingin 
ditahan. Pada menu Window, klik Freeze Panes. Selanjutnya, agar 
lebih aman orang yang tidak berkepentingan kita bisa kunci dan beri 
password buku rapor. 
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(9) Masukkan Huruf Nilai (2) 


Sekarang buat judul kolom baru di sebelah kolom Rata-Rata. Atau jika 
Anda memberikan penilaian dengan sistem poin, buat kolom baru di 
sebelah kolom Persentase, dan beri nama Nilai. Pada sel Nilai untuk 
murid pertama, ketik pernyataan IF berikut:-IFC4»H1,"A" ,IF(C4>J1 
"B" IF(C4>01," C”, IF(C4>T1,”D”,”F”)))di mana C4 menunjukkan 
sel di mana rata-rata atau persentase murid dicatat dan H1, J1, O1, 
dan T1 menunjukkan sel di mana persentase maksimum setiap huruf 
ditampilkan. Copy formula ke sel Nilai murid-murid yang lain. 


Kunci Rapor 


[tambor | aiment | Font 1 Border | pattems [Teresen] 


Pilih kolom yang ingin Anda kunci, klik kanan, dan kemudian klik 
Format Cells. Pada tab Protection, beri tanda centang (“) Locked, dan 
kemudian klik OK. Pada menu Tools, pilih Protection, lalu klik Protect 
Sheet. Jika Anda ingin melindungi worksheet dengan password, ketik 
password, dan kemudian klik OK. Kotak dialog Confirm Password 
tampil. Masukkan lagi password, lalu klik OK. Untuk membuka proteksi 
worksheet supaya bisa melakukan perubahan, pada menu Tools, pilih 
Protection, dan kemudian klik Unprotect Sheet. Jika worksheet dipro- 
teksi dengan password, ketik password, dan kemudian klik OK. 
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Pelajaran/Periode Lain (1) 


ga 
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Setelah membuat buku rapor elektronik di Excel, Anda bisa langsung 
meng-copy worksheet, lengkap dengan nama dan formula. Untuk 
membuat buku rapor untuk pelajaran atau periode lain: Klik kanan 
tab sheet yang ada di bagian bawah layar, dan kemudian klik Move 
or Copy. Kotak dialog Move or Copy muncul. Pilih lokasi worksheet 
hasil copy, beri tanda centang (“) Create Copy, dan kemudian klik 
OK. Untuk mengganti nama worksheet yang baru, klik kanan tab 
sheet, klik Rename, dan kemudian ketik namanya. 


(14 Lakukan Penilaian 
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Buku rapor elektronik bisa membuat pemberian nilai akhir—belum 
lagi nilai pertengahan atau mingguan—jauh lebih mudah dan tidak 
menghabiskan banyak waktu. Hanya butuh waktu setup sebentar 
untuk memulai. Dan pada waktu membuat buku rapor elektronik, ingat 
supaya fleksibel. Cobalah sampai menemukan formula dan fungsi yang 
sesuai untuk Anda. Sekarang setelah buku rapor elektronik sudah sele- 
sai, Anda bisa mulai menghitung nilai para murid dengan memasukkan 
angka-angkanya langsung pada tempat yang telah disediakan. 
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Microsoft Excel 


Pelajaran/Periode Lain (2) 


Update worksheet yang baru, sesuai dengan nama murid, pe- 
nilaian, dan data baru lainnya. Untuk menggunakan sel dari sheet 
lain (untuk mengambil nama atau penilaian dari pelajaran atau 
periode lain), pilih sel tempat Anda ingin memasukkan data, dan 
kemudian ketik -namasheet!A1, di mana namasheet menunjuk- 
kan nama worksheet tempat Anda menarik data dari dan A1 
menunjukkan nomor sel. 


Buku Rapor Elektronik 


m Buku rapor elektronik pada Microsoft Office Excel menghitung 
nilai para murid secara otomatis pada waktu angka dimasukkan, 
jadi Anda melihat melihat keseluruhan performa para murid se- 
cara keseluruhan. Jika Anda sertakan buku rapor dalam halaman 
ringkasan yang otomatis memasukkan nilai para murid saat itu, 
Anda mempunyai laporan yang singkat dan mudah yang siap 
untuk dicetak dan diberikan kepada para orang tua murid—atau, 
mengirim melalui e-mail. Khawatir dengan sekuriti? Jangan. Ti- 
dak sulit untuk mengunci dan mem-password buku rapor Anda 
sehingga tidak bisa diubah oleh orang lain. 
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